<section>
  <h4>普通极简模式</h4>
  <div style="margin-bottom: 40px;">
    <d-pagination [total]="pager3.total" [(pageSize)]="pager3.pageSize" [totalItemText]="'总条数'"
                    [(pageIndex)]="pager3.pageIndex" [canViewTotal]="true" [canChangePageSize]="true" [lite]="true">
    </d-pagination>
    <d-button bsStyle="stress" circled="true" size="sm" (click)="setTotal(0)">设置total为0</d-button>
    <d-button bsStyle="stress" circled="true" size="sm" (click)="setTotal(20)">设置total为20</d-button>
    <d-button bsStyle="stress" circled="true" size="sm" (click)="setTotal(30000)">设置total为30000</d-button>
    <d-button bsStyle="stress" circled="true" size="sm" (click)="setTotal(100000)">设置total为100000</d-button>
    <d-button bsStyle="stress" circled="true" size="sm" (click)="setIndex(2)">设置index为2</d-button>
    <d-button bsStyle="stress" circled="true" size="sm" (click)="setIndex(3)">设置index为3</d-button>
  </div>
  <h4>超极简模式</h4>
  <div style="margin-bottom: 40px;">
    <d-pagination [size]="'sm'" [total]="pager2.total" [(pageSize)]="pager2.pageSize" [showPageSelector]="false"
                    [(pageIndex)]="pager2.pageIndex" [canChangePageSize]="true" [lite]="true">
    </d-pagination>
  </div>
  <h4>带可拓展设置的设置下拉菜单</h4>
  <div>
    <d-pagination [size]="'sm'" [total]="pager1.total" [(pageSize)]="pager1.pageSize" [showPageSelector]="false"
                    [(pageIndex)]="pager1.pageIndex" [canChangePageSize]="true" [lite]="true"
                    [haveConfigMenu]="true">
      <div class="pagination-config-item">
        <div class="config-item-title">显示字段</div>
        <div class="config-item-words">点击设置</div>
      </div>
      <div class="pagination-config-item">
        <div class="config-item-title">显示方式</div>
        <div style="padding-left:10px;margin-top:4px">
          <i class="icon-list-view"></i>
          <i class="icon-veIcon-briefcase"></i>
        </div>
      </div>
    </d-pagination>
  </div>
</section>